<template>
  <el-row :gutter="40" style="height: 520px;">
    <div class="Configuration">
      <!-- <span>水位状态</span> -->
      <el-col :span="24" class="fl-bw">
        <!-- <div
          class="echart"
          id="mychart"
          :style="{ float: 'left', width: '40%', height: '470px' }"
        ></div> -->
        <div class="waterData">{{ seriesData }}{{ unit }}</div>
        <div class="right-box">
          <div class="setting">
            <span style="font-size: 18px;">设置</span>
            <div class="set-item">
              <div
                class="fl-alc"
                style="width: 220px;"
                @click="setupNumber('01')"
              >
                <div class="label">主动采集</div>
                <i
                  class="
                  iconfont
                "
                  >&#xe627;</i
                >
              </div>
              <div
                v-for="(item, index) in setArray"
                :key="index"
                class="fl-alc"
                style="width: 220px;"
                @click="setupNumber(item)"
              >
                <div class="label">{{ item.name }}</div>
                <el-input
                  v-model="item.number"
                  disabled
                  v-if="item.instructions !== '08'"
                />
                <el-input disabled style="width: 100px !important; " v-else>
                  <div slot="prefix">
                    {{
                      item.number == 1
                        ? "自动"
                        : item.number == 2
                        ? "关闭"
                        : "手动开"
                    }}
                  </div>
                </el-input>
              </div>
            </div>
          </div>
          <div class="history">
            <li>
              <span class="title">历史水位</span>
              <span class="date">时间</span>
            </li>
            <scroll
              :data="listData"
              class="seamless-warp"
              :class-option="defaultOption"
            >
              <ul class="item">
                <li v-for="(item, index) in listData" :key="index">
                  <span class="title" v-text="item.value"></span
                  ><span class="date" v-text="item.sendtime"></span>
                </li>
              </ul>
            </scroll>
          </div>
        </div>
      </el-col>
    </div>
    <el-dialog
      class="remote-modal"
      v-if="setupModalVisible"
      title="编辑"
      :visible.sync="setupModalVisible"
      :width="600 + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-form
        label-position="top"
        label-width="80px"
        style="height: 100px;"
        :rules="rules"
        ref="ruleForm"
        :model="ruleForm"
      >
        <el-form-item
          label="请输入数据"
          prop="settingNumber"
          v-if="ruleForm.instructions !== '08'"
        >
          <el-input v-model="ruleForm.settingNumber" placeholder="-"></el-input>
        </el-form-item>
        <el-form label="请选择数据" prop="settingNumber" v-else>
          <el-select v-model="ruleForm.settingNumber" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form>
        <el-form-item class="p-right">
          <el-button @click="setupModalVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-row>
</template>

<script>
import scroll from "vue-seamless-scroll";
import * as echarts from "echarts";
import { formatDate } from "@/assets/js/utils";
let socket = null;
export default {
  props: {
    svgdeviceClassify: {
      type: String,
      default: "",
    },
    svgdeviceId: {
      // 设备ID
      type: String,
      default: "",
    },
    number: {
      // 设备ID
      type: String,
      default: "",
    },
  },
  components: {
    scroll,
  },
  computed: {
    optionSingleHeight() {
      return {
        singleHeight: 16,
      };
    },
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    var settingNumber = (rule, value, callback) => {
      const reg = /^\d+.?\d{0,2}$/;
      if (!value) {
        callback(new Error("请输入"));
      } else if (!Number(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("小数点后最多只能输入两位"));
        }
      }
    };
    return {
      setArray: [
        {
          name: "控制切换",
          number: "",
          type: "manualAutomaticState",
          instructions: "08",
        },
        {
          name: "设定上上限报警值",
          number: "",
          type: "upperLimitAlarmSettingValues",
          instructions: "02",
        },
        {
          name: "设定上限报警值",
          type: "upperLimitAlarmSettingValue",
          number: "",
          instructions: "03",
        },
        {
          name: "设定下下限报警值",
          number: "",
          type: "lowerLimitAlarmSetPoints",
          instructions: "05",
        },
        {
          name: "设定下限报警值",
          number: "",
          type: "lowerLimitAlarmSetPoint",
          instructions: "04",
        },

        {
          name: "设定启动值",
          number: "",
          type: "startValue",
          instructions: "06",
        },
        {
          name: "设定停止值",
          number: "",
          type: "stopValue",
          instructions: "07",
        },
      ],
      listData: [],
      setupModalVisible: false,
      rules: {
        settingNumber: [{ validator: settingNumber, trigger: "blur" }],
      },
      ruleForm: {
        settingNumber: "",
      },
      options: [
        {
          label: "自动",
          value: 1,
        },
        {
          label: "关闭",
          value: 2,
        },
        {
          label: "手动开",
          value: 3,
        },
      ],
      seriesData: "",
      unit: "",
    };
  },
  mounted() {
    this.openSocket();
    this.getEquipmentOverview(this.number);
    this.getData();
    // this.initEcharts();
  },
  methods: {
    openSocket() {
      socket = io(this.config.socketUrl, { path: "/socket.io" });
      let uid = "1111";
      socket.on("connect", function() {
        console.log("connect");
      });
      socket.on("disconnect", function() {
        console.log("disconnect");
      });
      socket.on("new_msg", (msg) => {
        let dataArr = msg.split(",");
        let pointData = {};
        dataArr.forEach((item) => {
          let temp = item.split("=");
          pointData[temp[0]] = temp[1];
        });
        if (
          pointData.dataType == "2" &&
          pointData.number == this.number
        ) {
          this.getData();
          this.getEquipmentOverview(this.number);
        }
      });
      socket.open();
    },
    setupNumber(item) {
      // if (this.deviceDetail.currentstate == 3) {
      //   return;
      // }
      if (item == "01") {
        this.$post("/fireFightingIOT/device/setWaterColumnBoxData", {
          instructions: "01",
          number: this.number,
        })
          .then((res) => {
            if (res.code == 0) {
              this.setupModalVisible = false;
              this.getEquipmentOverview(this.number);
              this.$message.success("采集成功");
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
        return;
      }
      this.setupModalVisible = true;
      this.ruleForm.settingNumber = item.number;
      this.ruleForm.instructions = item.instructions;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid || this.ruleForm.instructions == "08") {
          this.$post("/fireFightingIOT/device/setWaterColumnBoxData", {
            instructions: this.ruleForm.instructions,
            data: this.ruleForm.settingNumber,
            number: this.number,
          })
            .then((res) => {
              if (res.code == 0) {
                this.setupModalVisible = false;
                this.getEquipmentOverview(this.number);
                this.$message.success("设置成功");
              } else {
                this.$message.error("设置失败");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        } else {
          return false;
        }
      });
    },
    getData() {
      let date = new Date();
      this.openFullLoading();
      this.$post("/fireFightingIOT/device/normalDataLogList", {
        deviceClassify: this.svgdeviceClassify,
        deviceId: this.svgdeviceId,
        // time: "2023-07-15",
        time: formatDate(new Date(date), "yyyy-MM-dd"),
        tabflag: 1,
      }).then((res) => {
        this.closeFullLoading();
        this.unit = res.data.deviceDetail.unit;
        this.listData = res.data.oneList[0].twoList[1].valueList;
        this.seriesData =
          this.listData.length !== 0
            ? this.listData[this.listData.length - 1].value
            : 0;
      });
    },
    getEquipmentOverview(number) {
      this.$get("/fireFightingIOT/device/getWaterColumnBoxData", {
        number,
      }).then((res) => {
        this.setArray.forEach((item) => {
          if (res.data.hasOwnProperty(item.type)) {
            //检测是否有此属性
            this.$set(item, "number", res.data[item.type]);
          }
        });
      });
    },
    initEcharts() {
      const option = {
        color: "#7bb6ff",
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid",
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          max: 10,
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#fff",
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: false,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            data: [this.seriesData],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#1b72dc",
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  destroyed() {
    socket.close();
  },
};
</script>

<style lang="less" scoped>
.iconfont {
  color: #1e3c88;
  cursor: pointer;
}
canvas {
  height: 480px;
  width: 100%;
}
.Configuration {
  background-image: url(./image/2s.gif);
  height: 100%;
  background-size: 100% 100%;
  padding: 20px 30px;
  .waterData {
    background: #fff;
    color: #000;
    height: 125px;
    padding: 30px 70px;
    font-size: 46px;
  }
  span {
    font-size: 25px;
  }
  .right-box {
    width: 58%;
    .setting {
      background: #ffffff1a;
      width: 100%;
      padding: 20px 30px;
      height: 300px;
    }
    .set-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 245px;
      .label {
        margin-right: 10px;
        width: 50px;
      }
      /deep/.el-input {
        width: 45% !important;
      }
      /deep/.el-input__inner {
        height: 50px;
      }
      /deep/.el-switch__label * {
        width: 10px;
        color: #fff;
      }
      /deep/.el-switch {
        width: 160px;
      }
    }
    /deep/.el-input__inner {
      cursor: pointer !important;
    }
    /deep/.is-disabled {
      .el-input__inner {
        background: #1e3c88 !important;
        border: none !important;
        color: #fff !important;
      }
    }
    /deep/.el-input__prefix {
      color: #fff !important;
      display: flex;
      align-items: center;
    }
  }
  .seamless-warp {
    height: 100%;
    overflow: hidden;
    margin-top: 10px;
  }
  .history {
    padding: 20px 30px;
    height: 125px;

    span {
      font-size: 16px !important;
    }
    li {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
